<script setup lang="ts">
import { computed, inject, onMounted, ref, watchEffect, type Ref } from "vue";
import type { FormDesignerComponents } from "../FormComponentMixin";
import type { DefColumn } from "@/views/def/table/DefColumn";
import { queryList } from "@/api/def/columnctrl";

const config = defineModel<FormDesignerComponents>("config");
const componentRefs = inject<Ref<object>>("componentRefs");
const columnList = ref<DefColumn[]>([]);
const queryFormRef = ref(null);
const queryForm = ref({
  tableId: ""
});

const itemList = computed(() => {
  if (
    config.value.props.queryColumnKeys &&
    config.value.props.queryColumnKeys.length > 0 &&
    columnList.value.length > 0
  ) {
    return columnList.value.filter(n => {
      if (n.columnKey) {
        return config.value.props.queryColumnKeys.includes(n.columnKey);
      } else {
        return false;
      }
    });
  } else {
    return [];
  }
});

const queryColumnDataList = () => {
  queryList({
    tableId: config.value.props.sourceTableId,
    columnShow: true
  }).then(res => {
    if (res.code === 200) {
      columnList.value = res.data;
    }
  });
};

onMounted(() => {
  if (config.value.props.sourceTableId) {
    queryColumnDataList();
  }
});

watchEffect(() => {
  if (config.value.props.sourceTableId) {
    queryColumnDataList();
  }
});

const onResetQuery = () => {
  if (componentRefs && componentRefs.value) {
    Object.keys(componentRefs.value).forEach(key => {
      if (
        key.includes("DefTableData") &&
        componentRefs.value[key].hasOwnProperty("handleResetQuery")
      ) {
        config.value.props.queryColumnKeys.forEach(columnKey => {
          queryForm.value[columnKey] = "";
        });
        componentRefs.value[key].queryTableData(queryForm.value);
      }
    });
  }
};

const onSearch = () => {
  if (componentRefs && componentRefs.value) {
    Object.keys(componentRefs.value).forEach(key => {
      if (
        key.includes("DefTableData") &&
        componentRefs.value[key].hasOwnProperty("queryTableData")
      ) {
        queryForm.value.tableId = config.value.props.sourceTableId;
        componentRefs.value[key].queryTableData(queryForm.value);
      }
    });
  }
};
</script>

<template>
  <div>
    <el-row :gutter="0" class="query-form">
      <el-col :span="24">
        <div class="top-panel">
          <el-form
            :inline="true"
            :label-width="config.props.labelWidth"
            :label-position="config.props.labelPosition"
            :model="queryForm"
            ref="queryFormRef"
          >
            <el-form-item
              v-for="(item, index) in itemList"
              :key="index"
              :label="item.columnComment"
            >
              <el-input v-model="queryForm[item.columnKey]" :placeholder="item.columnComment" />
            </el-form-item>
            <el-form-item>
              <el-button icon="refresh-left" type="warning" @click="onResetQuery"> 重置 </el-button>
              <el-button icon="Search" type="primary" @click="onSearch"> 查询 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
@use "sass:math";
@mixin panel {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  min-height: $base-input-height;
  margin: #{math.div($base-margin, 2)} 0 #{math.div($base-margin, 2)} 0;
  & .el-form-item__content {
    display: flex;
    align-items: center;
  }
  & {
    > .el-button {
      margin: #{math.div($base-margin, 2)} 10px #{math.div($base-margin, 2)} 0 !important;
    }
  }
}

.query-form :deep() {
  .el-form-item:first-child {
    margin: 0 0 #{math.div($base-margin, 2)} 0 !important;
  }

  .el-form-item + .el-form-item {
    margin: 0 0 #{math.div($base-margin, 2)} 0 !important;

    .el-button {
      margin: 0 0 0 10px !important;
    }
  }

  .top-panel {
    @include panel;
  }
}
</style>
